<template>
    <Drawer
        :title="`${$t('fault.addAcceptanceequipment')}`"
            v-model="changeDeviceVisible"
            width="720"
            :scrollable="true"
            :mask-closable="false"
            :styles="styles"
            :transfer="false"
    >
        <Form :label-width="100" label-position="left">
            <Row :gutter="16">
                <Col span="10">
                  <FormItem :label="`${$t('fault.order')}:`" required>
                        <Input v-model="searchParams.orderNo" :placeholder="`${$t('common.inputInfo')}`"/>
                    </FormItem>
                </Col>
                <Col span="10">
                  <FormItem :label="`${$t('equipCheck.Model')}:`" required>
                        <Input v-model="searchParams.specification " :placeholder="`${$t('common.inputInfo')}`"/>
                    </FormItem>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col span="10">
                    <FormItem :label="`${$t('maintenance.EquipmentNo')}:`" >
                        <Input v-model="searchParams.deviceMId" :placeholder="`${$t('common.inputInfo')}`"/>
                    </FormItem>
                </Col>
                <Col span="10">
                    <FormItem :label="`${$t('maintenance.EquipmentName')}:`" >
                        <Input v-model="searchParams.deviceName" :placeholder="`${$t('common.inputInfo')}`"/>
                    </FormItem>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col span="10">
                   <FormItem :label="`${$t('fault.FunctionalLocation')}:`" >
                        <Cascader clearable :data="orgList" v-model="searchParams.orgId"
                                  :placeholder="`${$t('common.selectInfo')}`" change-on-select></Cascader>
                    </FormItem>
                </Col>
                <Col span="10">
                  <FormItem :label="`${$t('preliminary.ManufacturingNumber')}:`" >
                        <Input v-model="searchParams.factoryNo" :placeholder="`${$t('common.inputInfo')}`"/>
                    </FormItem>
                </Col>
                <Col span="4">
                    <Button type="primary" @click="changeNum">{{$t('common.Query')}}</Button>
                </Col>
            </Row>
        </Form>
        <div style="margin-top: 10px;">
            <Table
                    row-key="id"
                    :columns="columns"
                    :data="dataSource"
                    @on-selection-change="handleSelectionChange">
                <template slot-scope="{ row }" slot="action">
                </template>
            </Table>
            <div class="pageWrap">
                <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
            </div>
        </div>
        <div class="demo-drawer-footer">
            <Button style="margin-right: 8px" @click="changeDeviceVisible = false">{{$t('common.Cancle')}}</Button>
            <Button type="primary" @click="handleOk">{{$t('maintenance.Confirmed')}}</Button>
        </div>
    </Drawer>
</template>

<script>
    import recursion from '../../../../util/recursion'
    export default {
        name: "chooseDeviceModal",
        data() {
            return {
                changeDeviceVisible: false,
                total: 0,
                pageNum: 1,
                pageSize: 10,
                orgList: [],
                pageSizeOption: [10, 20, 30],
                styles: {
                    height: 'calc(100% - 100px)',
                    overflow: 'scroll',
                    paddingBottom: '53px',
                    position: 'static'
                },
                searchParams: {},
                columns: [
                    {
                        type: 'selection',
                        minWidth: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        title: `${ this.$t('maintenance.EquipmentNo') }`,
                        key: 'deviceMId',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                      title: `${ this.$t('preliminary.ManufacturingNumber') }`,
                        key: 'factoryNo',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                       title: `${ this.$t('maintenance.EquipmentName') }`,
                        key: 'deviceName',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                       title: `${ this.$t('fault.FunctionalLocation') }`,
                        key: 'orgName',
                        align: 'center',
                        minWidth: 120,
                        tooltip: true
                    },
                ],
                dataSource: [],
                selectSource: []
            }
        },
        created() {
            this.getOrgList()
        },
        methods: {
            getOrgList() {
                this.axios({
                    method: 'get',
                    url: '/basic/organization/findListByToken',
                    params: {}
                }).then(res => {
                    if(res.code === 200){
                        const obj ={
                            label: 'name',
                            value: 'code',
                            children: 'children'
                        }
                        this.orgList = recursion.convertTree(res.data, obj)
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            show() {
                this.dataSource = []
                this.searchParams = {}
                this.changeDeviceVisible = true
                // this.changeNum()
            },
            handleSelectionChange(data) {
                console.log(data)
                this.selectSource = [...data]
            },
            handleOk() {
                this.changeDeviceVisible = false
                this.$emit('handleMulDevice', this.selectSource, {orderNo: this.searchParams.orderNo, specification: this.searchParams.specification})
            },
            //分页
            changeNum() {
                this.pageNum = 1;
                this.searchList();
            },
            changePageSize(pageSize) {
                this.pageSize = pageSize;
                this.searchList();
            },
            changePageNum(val) {
                this.pageNum = val;
                this.searchList();
            },
            searchList() {
                if(!this.searchParams.orderNo || !this.searchParams.specification) {
                    this.$Message.warning(({content: '请输入查询条件', duration: 6, closable: true}));
                    return false
                }
                let params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                };
                for (let key in this.searchParams) {
                    if (key === 'orgId' && this.searchParams['orgId']) {
                        const arr = this.searchParams[key]
                        const { length, last=length-1 } = arr
                        this.$set(params, key, arr[last])
                    }else{
                        if (this.searchParams[key]) {
                            this.$set(params, key, this.searchParams[key])
                        }
                    }
                }
                this.axios({
                    method: 'get',
                    url: '/dms/dmsCheck/getDeviceList',
                    params: params
                }).then(res => {
                    
                    if (res.code === 200) {
                        this.dataSource = res.data.list
                        this.total = res.data.total
                    } else {
                        this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                    }
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .demo-drawer-footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }
    ::v-deep.ivu-form-item-label {
        /*display: inline-block;*/
        /*width: 40%;*/
        /*height: 48px;*/
        /*line-height: 48px;*/
        background: #ffffff!important;
        text-align: right;
        border: 0!important;
        /*padding-right: 10px;*/
    }
    ::v-deep.ivu-form-item {
        margin-bottom: 24px!important;
        border: 0!important;
    }
</style>
